const dataX = [1, 2, 3, 4, 4]
const dataY = ['数字乡村', '粮食作物', '经济作物', '设施农业', '养殖']
// 柱体颜色
const color = [
  {
    type: 'linear',
    x: 1,
    y: 0,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: '#FDE153'
      },
      {
        offset: 1,
        color: '#00BABC'
      }
    ]
  }
]
// 底面颜色
// const coverColor = color.map(() => {
//   return {
//     type: 'linear',
//     x: 0,
//     y: 0,
//     x2: 1,
//     y2: 0,
//     colorStops: [
//       {
//         offset: 0,
//         color: '#0FEAED'
//       },
//       {
//         offset: 1,
//         color: '#CDFCFF'
//       }
//     ]
//   }
// })
// 标签颜色
// const labelColor = ['#FF6737', '#FFC13A', '#34EB94']

const option = {
  backgroundColor: 'transparent',
  grid: { top: '5%', left: '24%', right: '6%', bottom: '10%' },
  legend: {
    show: false
  },
  tooltip: {
    trigger: 'item'
    // formatter: '{b}\r{c}'
  },
  // 滚动条
  dataZoom: [
    {
      type: 'slider',
      show: false,
      yAxisIndex: [0],
      width: 6, // 组件宽度
      // height: 100,//组件高度
      left: '95%', // 滚动条位置
      realtime: true, // 是否实时更新
      borderColor: 'transparent',
      textStyle: {
        fontSize: 0
      },
      startValue: 0,
      endValue: 5,
      backgroundColor: 'rgba(0,0,0,0)',
      borderWidth: 0,
      handleSize: '0%',
      handleStyle: {
        color: '#d3dee5'
      }
    }
  ],
  xAxis: [
    {
      type: 'value',
      axisTick: { show: false },
      axisLine: {
        show: false,
        lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' }
      },
      splitLine: {
        show: false,
        lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' }
      },
      axisLabel: {
        show: false,
        rotate: 0,
        textStyle: { fontSize: 12, color: '#fff' }
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      data: dataY,
      axisTick: { show: false },
      axisLine: {
        show: false,
        lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' }
      },
      splitLine: {
        show: false,
        lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' }
      },
      inverse: true,
      axisLabel: {
        formatter(v) {
          v.length > 10 ? (v = v.substring(0, 10) + '..') : v
          return v
        },
        textStyle: { fontSize: 16, color: '#fff' }
      }
    }
  ],
  series: [
    // 柱体
    {
      z: 2,
      type: 'bar',
      name: '',
      barWidth: 16,
      data: dataX,
      label: {
        normal: {
          show: true,
          position: 'insideLeft',
          formatter: param => {
            const result = param.value + '%'
            return result
          }
        }
      },
      itemStyle: {
        color: color[0]
      }
    }
    // 上底面
    // TODO: 如果值为0，对齐方式有问题，暂未解决
    // {
    //   z: 11,
    //   type: 'pictorialBar',
    //   symbolPosition: 'end',
    //   symbol: 'diamond',
    //   symbolOffset: ['50%', '0%'],
    //   symbolSize: [6, 24],
    //   data: dataX,
    //   itemStyle: {
    //     color: coverColor[0],
    //     opacity: 1
    //   },
    //   tooltip: {
    //     show: false
    //   }
    // },
    // // 为了label颜色跟随系列色
    // {
    //   z: 9, // 层级比上底面低就行
    //   type: 'pictorialBar',
    //   symbolPosition: 'end',
    //   symbol: 'diamond',
    //   symbolOffset: ['50%', '0%'],
    //   symbolSize: [0, 0],
    //   data: dataX,
    //   itemStyle: {
    //     color: labelColor[0],
    //     opacity: 1
    //   },
    //   tooltip: {
    //     show: false
    //   },
    //   label: {
    //     show: false,
    //     position: 'right',
    //     fontSize: window.nowSize(8),
    //     color: 'inherit'
    //   }
    // }
    // 下底面
    // {
    //   z: 10,
    //   type: 'pictorialBar',
    //   symbolPosition: 'end',
    //   symbol: 'diamond',
    //   symbolOffset: ['0%', '-50%'],
    //   symbolSize: [24, 10],
    //   data: new Array(dataY.length).fill(0),
    //   itemStyle: {
    //     color: '#ffc436',
    //     opacity: new Array(dataY.length).fill(0)
    //   },
    //   tooltip: {
    //     show: false
    //   }
    // }
  ]
}

export default option
